<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎使用联合防卫系统</title>
<script type="text/javascript" src="/static/js/jiku.js"></script>
<script src="/static/js/vue.js"></script>
<script src="/static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/static/js/util.js"></script>
<!--    <script type="text/javascript" src="/static/js/websocket.js"></script>-->
<!-- 引入样式 -->
<link rel="stylesheet" type="text/css" href="/static/css/index.css"/>
<!-- 引入组件库 -->
<script src="/static/js/element.js"></script>


    <script src="/static/amap/AMap3.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/js/ckplayerx3/css/ckplayer.css">
<script type="text/javascript" charset="utf-8" src="/static/js/ckplayerx3/js/ckplayer.js"></script>
    <script src="/static/js/ZLMRTCClient.js"></script>
    <script src="/static/js/echart/echarts.min.js"></script>
    <style>

        .circle {
            z-index: 1000;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            --border-size: 3px;
            --border-angle: 0turn;
            --grid-bg: radial-gradient(
                    transparent 69%,
                    limegreen 69%,
                    limegreen 70%,
                    transparent 70%
            );
            --line-bg: transparent 50%, limegreen 50%, transparent 50.5%;
            background-image: conic-gradient(from var(--border-angle), transparent 10%, #0d0a 99%, limegreen 99.5%), linear-gradient(0deg, var(--line-bg)), linear-gradient(45deg, var(--line-bg)), linear-gradient(90deg, var(--line-bg)), linear-gradient(135deg, var(--line-bg)), var(--grid-bg), var(--grid-bg), var(--grid-bg);
            background-size: cover, cover, cover, cover, cover, 25% 25%, 50% 50%, 75% 75%;
            background-position: center center;
            background-repeat: no-repeat;
            border-radius: 50%;
            border: solid 0.5vmin limegreen;
            -webkit-animation: bg-spin 3s linear infinite;
            animation: bg-spin 3s linear infinite;
            position: relative;
            /*filter: drop-shadow(0px 0px 1vmin black) blur(0.5px) contrast(200%);*/
        }
        @-webkit-keyframes bg-spin {
            to {
                --border-angle: 1turn;
            }
        }
        @keyframes bg-spin {
            to {
                --border-angle: 1turn;
            }
        }
        .circle::after {
            content: "";
            /*display: block;*/
            /*position: absolute;*/
            top: 30%;
            left: 30%;
            width: 1vmin;
            height: 1vmin;
            background: limegreen;
            border-radius: 50%;
            /*-webkit-animation: move 18s steps(6) infinite;*/
            /*animation: move 18s steps(6) infinite;*/
        }
        /*@-webkit-keyframes move {*/
        /*    33% {*/
        /*        transform: translate(25vmin, 10vmin);*/
        /*    }*/
        /*    66% {*/
        /*        transform: translate(15vmin, 30vmin);*/
        /*    }*/
        /*    100% {*/
        /*        transform: translate(0vmin, 0vmin);*/
        /*    }*/
        /*}*/
        /*@keyframes move {*/
        /*    33% {*/
        /*        transform: translate(25vmin, 10vmin);*/
        /*    }*/
        /*    66% {*/
        /*        transform: translate(15vmin, 30vmin);*/
        /*    }*/
        /*    100% {*/
        /*        transform: translate(0vmin, 0vmin);*/
        /*    }*/
        /*}*/
        .circle::before {
            content: "";
            display: block;
            position: absolute;
            inset: 0;
            border-radius: 50%;
            /*border: solid 2vmin limegreen;*/
            -webkit-animation: scale 3s linear infinite;
            animation: scale 3s linear infinite;
        }
        @-webkit-keyframes scale {
            from {
                transform: scale(0);
            }
            50% {
                transform: scale(1.2);
            }
            51%, 100% {
                opacity: 0;
            }
        }
        @keyframes scale {
            from {
                transform: scale(0);
            }
            50% {
                transform: scale(1.2);
            }
            51%, 100% {
                opacity: 0;
            }
        }

        @property --border-angle {
            syntax: "<angle>";
            inherits: true;
            initial-value: 0turn;
        }
        .everybtn  span, .everybtn  img{
            display: inline;
            vertical-align: middle;
            font-size: 14px;
            width: 80px;
            height: 25px;
            text-align: center;
            margin-right: 10px;

        }
        .everybtn  img{
            cursor: pointer;
        }

        .sblist{
            position: absolute;
            top: 0;
            right: 70px;
            background: #1E1404;
            width: 130px;
            height: 320px;
            padding: 10px;
            border: 1px solid rgb(172, 133, 66);
        }
        .gjcxlist{
            position: absolute;
            top: -5px;
            right: 70px;
            background: #1E1404;
            width: 550px;
            height: 30px;
            padding: 10px;
            border: 1px solid rgb(172, 133, 66);
        }
        .bjqylist{
            position: absolute;
            top: 0px;
            right: 70px;
            background: #1E1404;
            width: 200px;
            height: 180px;
            padding: 10px;
            border: 1px solid rgb(172, 133, 66);
        }
        .bjqylist >div{
            line-height: 45px;
            height: 45px;
        }

        .group-name{
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .group-list{
            padding-left: 20px;
        }
        .group-list-item{
            display: flex;
            justify-content: space-between;
            height: 25px;
            line-height: 25px;
        }
        .active{
            background: #7F5D25;
        }

        /*闪烁的告警点*/
        @keyframes myfirst01{
            0% {
                -moz-box-shadow: 0px 0px 10px 2px #00e921;
                box-shadow: 0px 0px 10px 2px #00e921;
            }
            50% {
                -moz-box-shadow: 0px 0px 20px 2px #00e921;
                box-shadow: 0px 0px 20px 2px #00e921;
            }
            100% {
                -moz-box-shadow: 0px 0px 10px 2px #00e921;
                box-shadow: 0px 0px 10px 2px #00e921;
            }

        }
        @keyframes myfirst02{
            0% {
                -moz-box-shadow: 0px 0px 10px 2px #fffa02;
                box-shadow: 0px 0px 10px 2px #fffa02;
            }
            50% {
                -moz-box-shadow: 0px 0px 20px 2px #fffa02;
                box-shadow: 0px 0px 20px 2px #fffa02;
            }
            100% {
                -moz-box-shadow: 0px 0px 10px 2px #fffa02;
                box-shadow: 0px 0px 10px 2px #fffa02;
            }

        }
        @keyframes myfirst03{
            0% {
                -moz-box-shadow: 0px 0px 10px 2px #98014e;
                box-shadow: 0px 0px 10px 2px #98014e;
            }
            50% {
                -moz-box-shadow: 0px 0px 20px 2px #98014e;
                box-shadow: 0px 0px 20px 2px #98014e;
            }
            100% {
                -moz-box-shadow: 0px 0px 10px 2px #98014e;
                box-shadow: 0px 0px 10px 2px #98014e;
            }

        }
        @keyframes myfirst04{
            0% {
                -moz-box-shadow: 0px 0px 10px 2px #ff7d00;
                box-shadow: 0px 0px 10px 2px #ff7d00;
            }
            50% {
                -moz-box-shadow: 0px 0px 20px 2px #ff7d00;
                box-shadow: 0px 0px 20px 2px #ff7d00;
            }
            100% {
                -moz-box-shadow: 0px 0px 10px 2px #ff7d00;
                box-shadow: 0px 0px 10px 2px #ff7d00;
            }

        }


        @keyframes blink {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0.1;
            }
            100% {
                opacity: 1;
            }
        }

    </style>
</head>
<body>
<div id="app" :class="showDialog? 'masked-background':''">
    <template>
        <!--narbar-->
        <el-row :gutter="0">
            <el-col>
                <div class="navbar">
                    <div class="navbar-container">
                        <div class="navbar-title">
<!--                            联合防卫系统-->
                            <img src="/static/img/sys/title.png" style="width: 280px;" />
                        </div>
                        <div class="navbar-right">
                            <div class="navbar-btns">

                                <div class="navbar-btn btn-active" @click="changeModel()">
                                    模式切换
                                </div>
                                <div class="navbar-btn btn-active" @click="toDevice">设备管理</div>
                            </div>
                            <div class="times">
                                {{currentTime}} {{currentWeek}} 晴 30℃
                            </div>


                        </div>
                    </div>


                    <div style="margin-right: 10px;">
                        <el-dropdown>

                              <span class="el-dropdown-link">
                                  <img src="/static/img/sys/ (5).png" style="display: inline-block;width: 50px;margin-top: 0px;vertical-align: middle;"/>
                                  <i class="el-icon-arrow-down el-icon--right" style="margin-top: 30px;color: #fff;"></i>
                              </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
            </el-col>
        </el-row>
        <!--container-->
        <div class="container">
            <el-row :gutter="20">
                <el-col :span="12">
                    <img src="/static/img/jk-page/1.png" style="position: absolute;height: 25px; width: 25px;z-index:10000;left: 20px;top: 10px;cursor: pointer; " @click="showLeiDaGuanCha"/>
                    <img src="/static/img/jk-page/gj2.png" v-if="hasAlarm && !showAlarmTip" style="position: absolute;height: 25px; width: 30px;z-index:10000;left: 20px;bottom: 30px;cursor: pointer; " @click="showAlarmTipBtn"/>
                    <div id="container" ref="container" class="allnav" style="height: 640px;width: 100%;margin-bottom: 20px;border:1px solid #AC8542;">
                        <div class="tools">
                            <div :class="active == 1 ? 'it-tool active':'it-tool'"  @click.stop="doActive(1)" >
                                <img src="/static/img/jk-page/tool-1.png" />
                                <div>轨迹查询</div>
                                <div class="gjcxlist" v-show="active == 1">
                                    <el-date-picker
                                            v-model="gjcxForm.startDate"
                                            type="datetime"
                                            format="yyyy-MM-dd HH:mm:ss"
                                            value-format="yyyy-MM-dd HH:mm:ss"
                                            placeholder="选择开始日期" size="mini" style="width:200px;">
                                    </el-date-picker>
                                    ~
                                    <el-date-picker
                                            v-model="gjcxForm.endDate"
                                            type="datetime"
                                            format="yyyy-MM-dd HH:mm:ss"
                                            value-format="yyyy-MM-dd HH:mm:ss"
                                            placeholder="选择结束日期" size="mini" style="width:200px;">
                                    </el-date-picker>
                                    <el-button type="primary" size="mini" @click="showTrack">查询</el-button>
                                    <el-button size="mini" @click="clearTrack">取消</el-button>
                                </div>
                            </div>
                            <div :class="active == 2 ? 'it-tool active':'it-tool'" @click.stop="doActive(2)" >
                                <img src="/static/img/jk-page/tool-2.png" />
                                <div>设备管理</div>
                                <div class="sblist" v-show="active == 2">
                                    <div class="group" v-for="(item,index) in typeDeviceList" :key="index">
                                        <div class="group-name">
                                            <div>{{index}}</div>
<!--                                            <div><input type="checkbox"/></div>-->
                                        </div>
                                        <div class="group-list">
                                            <div v-for="(it,i) in item" :key="i">
                                                <div class="group-list-item" draggable="true"  @dragstart="anxia(it)"  @click="selectRadio(it)">
                                                    <div>
                                                        <div style="display: inline-block;color:green;" v-if="it.status == 1">(在线)</div>
                                                        <div style="display: inline-block;color:#ddd;" v-else>(离线)</div>
                                                        {{it.name}}
                                                    </div>
                                                    <div><input type="radio" name="devicename" :value="it.id" :checked="currentDeviceId == it.id"/></div>
                                                </div>
                                            </div>
<!--                                            <div class="group-list-item" draggable="true"  ondragstart='anxia(2)' ondrop='songkai(2)'>-->
<!--                                                <div>M400-001</div>-->
<!--                                                <div><input type="checkbox"/></div>-->
<!--                                            </div>-->
                                        </div>
                                    </div>
<!--                                    <div class="group">-->
<!--                                        <div class="group-name">-->
<!--                                            <div>M400</div>-->
<!--&lt;!&ndash;                                            <div><input type="checkbox"/></div>&ndash;&gt;-->
<!--                                        </div>-->
<!--                                        <div class="group-list">-->
<!--                                            <div class="group-list-item" draggable="true"  ondragstart='anxia(3)' ondrop='songkai(3)'>-->
<!--                                                <div>M400-001</div>-->
<!--                                                <div><input type="checkbox"/></div>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </div>-->
                                </div>
                            </div>
                            <div :class="active == 3 ? 'it-tool active':'it-tool'" @click.stop="doActive(3)">
                                <img src="/static/img/jk-page/tool-3.png" />
                                <div>报警区域</div>
                                <div class="bjqylist" v-show="active == 3">
                                    <div>
                                        跟踪区半径
                                        <el-input v-model="bjqyForm.gzq" placeholder="请输入" size="mini" style="width: 100px;"></el-input>
                                        米
                                    </div>
                                    <div>
                                        警戒区半径
                                        <el-input v-model="bjqyForm.jjq" placeholder="请输入" size="mini" style="width: 100px;"></el-input>
                                        米
                                    </div>
                                    <div>
                                        拒止区半径
                                        <el-input v-model="bjqyForm.jzq" placeholder="请输入" size="mini" style="width: 100px;"></el-input>
                                        米
                                    </div>
                                    <div>
                                        <el-button type="primary" size="mini" @click="bjqySubmit">提交</el-button>
                                        <el-button size="mini" @click="bjqyReset">重置</el-button>
                                    </div>
                                </div>
                            </div>
                            <div class="it-tool">
                                <img src="/static/img/jk-page/tool-4.png" />
                                <div>报警清除</div>
                            </div>
                            <div class="it-tool">
                                <img src="/static/img/jk-page/tool-5.png" />
                                <div>报警统计</div>
                            </div>
                        </div>
                    </div>
                    <div v-if="leidaguancha" class="control-leidaguancha" style="width: 210px;height: 350px;">
                        <div style="position: absolute;right: 0;top:5px;background-image: url('/static/img/sys-wrj/closebj.png');width: 40px;cursor: pointer;" @click="closeControl">
                            <img src="/static/img/sys-wrj/close.png" style="margin-left: 15px;width: 16px;" />
                        </div>
                        <div style="text-align: center;font-size: 18px;letter-spacing: 2px;">雷达观察窗口</div>
                        <el-row :gutter="1" style="background: #302307;margin-top: 10px;">

                            <el-col :span="4" style="background: #806028;width: 40px;padding: 10px 5px;">
                                <div class="cell">批号</div>
                                <div class="cell">距离(m)</div>
                                <div class="cell">方位</div>
                                <div class="cell">俯仰</div>
                                <div class="cell">高度(m)</div>
                                <div class="cell">速度(km/h)</div>
                                <div class="cell">类型</div>
                            </el-col>
                            <el-col :span="6" style="border-right:2px solid #604C18;width: 55px;padding: 10px 5px;">
                                <div class="cell">0001</div>
                                <div class="cell">12.1</div>
                                <div class="cell">西南</div>
                                <div class="cell">10°</div>
                                <div class="cell">15</div>
                                <div class="cell">25.2</div>
                                <div class="cell">军事</div>
                            </el-col>
                            <el-col :span="6" style="border-right:2px solid #604C18;width: 55px;padding: 10px 5px;">
                                <div class="cell">0001</div>
                                <div class="cell">12.1</div>
                                <div class="cell">西南</div>
                                <div class="cell">10°</div>
                                <div class="cell">15</div>
                                <div class="cell">25.2</div>
                                <div class="cell">军事</div>
                            </el-col>
                            <el-col :span="6" style="width: 55px;padding: 10px 5px;">
                                <div class="cell">0001</div>
                                <div class="cell">12.1</div>
                                <div class="cell">西南</div>
                                <div class="cell">10°</div>
                                <div class="cell">15</div>
                                <div class="cell">25.2</div>
                                <div class="cell">军事</div>
                            </el-col>
                        </el-row>

                    </div>
                    <div v-if="hasAlarm && showAlarmTip" class="control-alarmtip" style="width: 350px;height: 100px;">
                        <div style="position: absolute;right: 0;top:5px;background-image: url('/static/img/sys-wrj/closebj.png');width: 40px;cursor: pointer;" @click="closeAlarmtip">
                            <img src="/static/img/sys-wrj/close.png" style="margin-left: 15px;width: 16px;" />
                        </div>
                        <div style="text-align: center;font-size: 18px;letter-spacing: 2px;">告警提示</div>
                        <div style="text-align: center;color: yellow;margin-top: 20px;">有目标进入警觉区域，请及时制止！</div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div  class="allnav" style="height: 640px;width: 100%;margin-bottom: 20px;border:1px solid #AC8542;">
                        <div style="padding: 20px;">
                            <img src="/static/img/jk-page/4.png" style="position: absolute;height: 25px; width: 25px;" @click="toControl(2)"/>
                            <div style="text-align: center;width: 100%;">{{videoForm.title}}</div>
                            <div v-if="controlWrj.show" class="control-wrj">
                                <div style="position: absolute;right: 10px;top:30px;;width: 40px;cursor: pointer;" @click="closeControl">
                                    <img src="/static/img/jk-page/close-win.png" style="margin-left: 15px;width: 16px;" />
                                </div>
                                <div style="position: absolute;top: 20px;width: 300px;text-align: center;margin-left: -120px;left: 40px;font-size: 19px;letter-spacing: 2px;;color:#F6DFB0;">云台控制</div>
<!--                                <div style="position: absolute;bottom: 15px;width: 600px;text-align: center;margin-left: -300px;left: 50%;font-size: 14px;letter-spacing: 1px;color: #A89882;">-->
<!--                                    <img src="/static/img/sys-wrj/tan.png" style="width: 24px;vertical-align: middle;"/>-->
<!--                                    云台控制按键，非专业人员请勿使用！-->
<!--                                </div>-->
                                <el-row :gutter="1" class="control-wrj-fun">
                                    <el-col :span="24">
                                        <div style="display: flex;width: 330px;margin: 0 auto;">
                                            <div style="width: 140px;">
                                                <div style="display: flex;justify-content: space-between;">
                                                    <div>
                                                        <img src="/static/img/jk-page/ytkz-11.png" style="cursor: pointer;" @mousedown="sendWsRrj('left_up','0', '0', 32, 1)" @mouseup="sendWsRrjUp('ptzstop','0', '0', 32, 1)"/>
                                                    </div>
                                                    <div>
                                                        <img src="/static/img/jk-page/ytkz-10.png" style="cursor: pointer;" @mousedown="sendWsRrj('up','0', '0', 32, 1)" @mouseup="sendWsRrjUp('ptzstop','0', '0', 32, 1)"/>
                                                    </div>
                                                    <div>
                                                        <img src="/static/img/jk-page/ytkz-5.png" style="cursor: pointer;" @mousedown="sendWsRrj('right_up','0', '0', 32, 1)" @mouseup="sendWsRrjUp('ptzstop','0', '0', 32, 1)"/>
                                                    </div>
                                                </div>
                                                <div style="display: flex;justify-content: space-between;">
                                                    <div>
                                                        <img src="/static/img/jk-page/ytkz-1.png" style="cursor: pointer;" @mousedown="sendWsRrj('left','0', '0', 32, 1)" @mouseup="sendWsRrjUp('ptzstop','0', '0', 32, 1)"/>
                                                    </div>
                                                    <div>
                                                        <img src="/static/img/jk-page/ytkz-9.png" style="cursor: pointer;" @mousedown="sendWsRrj('drone_left','0', '0', 32, 1)" @mouseup="sendWsRrjUp('ptzstop','0', '0', 32, 1)"/>
                                                    </div>
                                                    <div>
                                                        <img src="/static/img/jk-page/ytkz-2.png" style="cursor: pointer;" @mousedown="sendWsRrj('right','0', '0', 32, 1)" @mouseup="sendWsRrjUp('ptzstop','0', '0', 32, 1)"/>
                                                    </div>
                                                </div>
                                                <div style="display: flex;justify-content: space-between;">
                                                    <div>
                                                        <img src="/static/img/jk-page/ytkz-3.png" style="cursor: pointer;" @mousedown="sendWsRrj('left_down','0', '0', 32, 1)" @mouseup="sendWsRrjUp('ptzstop','0', '0', 32, 1)"/>
                                                    </div>
                                                    <div>
                                                        <img src="/static/img/jk-page/ytkz-6.png" style="cursor: pointer;" @mousedown="sendWsRrj('down','0', '0', 32, 1)" @mouseup="sendWsRrjUp('ptzstop','0', '0', 32, 1)"/>
                                                    </div>
                                                    <div>
                                                        <img src="/static/img/jk-page/ytkz-4.png" style="cursor: pointer;" @mousedown="sendWsRrj('right_down','0', '0', 32, 1)" @mouseup="sendWsRrjUp('ptzstop','0', '0', 32, 1)"/>
                                                    </div>
                                                </div>
                                            </div>
                                            <div style="width: 140px;margin-left: 40px;">
                                                <div style="display: flex;justify-content: space-between;">
                                                    <div>
                                                        <img src="/static/img/jk-page/ytkz-7.png" style="cursor: pointer;" @mousedown="sendWsRrj('zoomup','0', '0', 32, 1)" @mouseup="sendWsRrjUp('ptzstop','0', '0', 32, 1)"/>
                                                    </div>
                                                    <div style="width: 60px;text-align: center;">
                                                        <span>缩放
<!--                                                            {{ytkzForm.zoom}}-->
                                                        </span>
                                                    </div>
                                                    <div>
                                                        <img src="/static/img/jk-page/ytkz-8.png" style="cursor: pointer;" @mousedown="sendWsRrj('zoomdown','0', '0', 32, 1)" @mouseup="sendWsRrjUp('ptzstop','0', '0', 32, 1)"/>
                                                    </div>
                                                </div>
                                                <div style="display: flex;justify-content: space-between;">
                                                    <div>
                                                        <img src="/static/img/jk-page/ytkz-7.png" style="cursor: pointer;" @mousedown="sendWsRrj('focus+','0', '0', 32, 1)" @mouseup="sendWsRrjUp('ptzstop','0', '0', 32, 1)"/>
                                                    </div>
                                                    <div style="width: 60px;text-align: center;">
                                                        <span>聚焦
<!--                                                            {{ytkzForm.focus}}-->
                                                        </span>
                                                    </div>
                                                    <div>
                                                        <img src="/static/img/jk-page/ytkz-8.png" style="cursor: pointer;" @mousedown="sendWsRrj('focus-','0', '0', 32, 1)" @mouseup="sendWsRrjUp('ptzstop','0', '0', 32, 1)"/>
                                                    </div>
                                                </div>
                                                <div style="display: flex;justify-content: space-between;">
                                                    <div>
                                                        <img src="/static/img/jk-page/ytkz-7.png" style="cursor: pointer;" @mousedown="sendWsRrj('focus+','0', '0', 42, 1)" @mouseup="sendWsRrjUp('ptzstop','0', '0', 32, 1)"/>
                                                    </div>
                                                    <div style="width: 60px;text-align: center;">
                                                        <span>反转
<!--                                                            {{ytkzForm.focus}}-->
                                                        </span>
                                                    </div>
                                                    <div>
                                                        <img src="/static/img/jk-page/ytkz-8.png" style="cursor: pointer;" @mousedown="sendWsRrj('focus-','0', '0', 42, 1)" @mouseup="sendWsRrjUp('ptzstop','0', '0', 32, 1)"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-col>

                                </el-row>
                                <el-row style="width: 330px;margin: 0 auto;">
                                    <el-col :span="5">
                                        <div style="margin-top: 10px;color:#F9F9F9;">云台速度</div>
                                    </el-col>
                                    <el-col :span="19">
                                        <el-slider v-model="ytkzForm.sd" @change="changeYtkzSd"></el-slider>
                                    </el-col>
                                </el-row>
                                <el-row style="width: 330px;margin: 0 auto;">
                                    <el-col :span="5">
                                        <div style="margin-top: 10px;color:#F9F9F9;">预置点</div>
                                    </el-col>
                                    <el-col :span="19">
                                        <div style="margin-top: 5px;">
                                            <el-input v-model="ytkzForm.yzd" placeholder="请输入内容" size="small" style="width: 130px;"></el-input>
                                            <el-button type="primary" size="small" style="margin-left: 5px;margin-right: 2px;background: #F3C37C;border-color:#F3C37C;color:#333;font-size: 15px;padding: 6px 12px;">添加</el-button>
                                            <el-button size="small" style="margin-left: 2px;background: #4C3A1F;border-color:#4C3A1F;color:#fff;font-size: 15px;padding: 6px 12px;">删除</el-button>
                                        </div>
                                    </el-col>
                                </el-row>

                            </div>
                        </div>
                        <div style="text-align: center;">
                            <video class="demo-video" ref="videoPlayer" controls autoplay muted style="width: 95%;height: 560px;margin: 0 auto;margin-top: 0px;">
                                Your browser is too old which doesn't support HTML5 video.
                            </video>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="video-bg">
                        <div class="video-title">{{videoForm.title}} - 无线电观察窗口</div>
                        <div style="width: 90%;height: 240px;margin: 0 auto;padding-top: 39px;display: flex;justify-content: space-between;">
                            <div style="width: calc(100% - 380px);">
                                <img src="/static/img/jk-page/1734355604003.jpg" style=""/>
                            </div>
                            <div  style="width: 150px;height: 100%;position:relative;margin-top: 20px;margin-left: 10px;">
                                <div class="circle" id="leidatu"></div>
                            </div>
                            <div style="width: 200px;margin-left: 20px;color:rgba(255,255,255,0.8);">
                                <div>重点压制设备状态/控制</div>
                                <div class="everybtn">
                                    <span>2.4G压制</span>
                                    <img src="/static/img/jk-page/open.jpg" v-if="yazhiForm.ms1" @click="sendWsYazhi('antidrone','0', '0', 32, '0000' )"/>
                                    <img src="/static/img/jk-page/close.jpg" v-else @click="sendWsYazhi('antidrone','0', '0', 32, '0001' )"/>
                                </div>
                                <div class="everybtn">
                                    <span>5.8G压制</span>
                                    <img src="/static/img/jk-page/open.jpg" v-if="yazhiForm.ms2" @click="sendWsYazhi('antidrone','0', '0', 32, '0010' )"/>
                                    <img src="/static/img/jk-page/close.jpg" v-else @click="sendWsYazhi('antidrone','0', '0', 32, '0011' )"/>
                                </div>
                                <div class="everybtn">
                                    <span>导航压制</span>
                                    <img src="/static/img/jk-page/open.jpg" v-if="yazhiForm.ms3" @click="sendWsYazhi('antidrone','0', '0', 32, '0100' )"/>
                                    <img src="/static/img/jk-page/close.jpg" v-else @click="sendWsYazhi('antidrone','0', '0', 32, '0101' )"/>
                                </div>
                                <div style="display: flex;margin-top: 10px;">
                                    <div style="position: relative;cursor: pointer" class="everybtn" @click="sendWsYazhi('manual','0', '0', 32, true )">
                                        <span style="position: absolute;" :style="{'color': yazhiForm.sdkzStart? 'yellow':'#BE9A64' }">手动控制</span>
                                        <img src="/static/img/jk-page/btn.png" style="width: 85px;height: 25px;margin-left: -4px;" />

                                    </div>
                                    <div style="position: relative;margin-left: 20px;cursor: pointer" class="everybtn" @click="sendWsYazhi('manual','0', '0', 32, false )">
                                        <span style="position: absolute;width: 105px;" :style="{'color': yazhiForm.gbsdkz? 'yellow':'#BE9A64' }">关闭手动控制</span>
                                        <img src="/static/img/jk-page/btn.png" style="width: 105px;height: 25px;margin-left: -4px;" />

                                    </div>
                                </div>
                                <div style="border-top:1px solid limegreen;margin: 10px 0;"></div>
                                <div>全频段设备状态/控制</div>
                                <div class="everybtn">
                                    <span>压制</span>
                                    <img src="/static/img/jk-page/open.jpg" v-if="yazhiForm.ms4" @click="sendWsYazhi('antidrone','0', '0', 32, '1000' )"/>
                                    <img src="/static/img/jk-page/close.jpg" v-else @click="sendWsYazhi('antidrone','0', '0', 32, '1111' )"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <div class="video-bg" id="dropzone" @dragover="dragover($event)" @drop="drop($event)">
                                <div class="video-title">{{videoForm.title1}}</div>
<!--                                <div class="video1" style="width: 90%;height: 240px;margin: 0 auto;padding-top: 40px;"></div>-->
                                <video class="demo-video" ref="videoPlayer1" controls autoplay muted style="width: 90%;height: 240px;margin: 0 auto;padding-top: 39px;">
                                    Your browser is too old which doesn't support HTML5 video.
                                </video>
                            </div>

                        </el-col>
                        <el-col :span="12" >
                            <div class="video-bg" id="dropzone2" @dragover="dragover($event)" @drop="drop2($event)">
                                <div class="video-title">{{videoForm.title2}}</div>
<!--                                <div class="video2" style="width: 90%;height: 240px;margin: 0 auto;padding-top: 40px;"></div>-->
                                <video class="demo-video" ref="videoPlayer2" controls autoplay muted style="width: 90%;height: 240px;margin: 0 auto;padding-top: 40px;">
                                    Your browser is too old which doesn't support HTML5 video.
                                </video>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>

            </el-row>
        </div>

        <div class="control-device-body" v-if="deviceDialog">
            <div class="control-device">
                <div style="position: absolute;right: 10px;top:30px;;width: 40px;cursor: pointer;" @click="closeControl">
                    <img src="/static/img/jk-page/close-win.png" style="margin-left: 15px;width: 16px;" />
                </div>
                <div style="position: absolute;top: 20px;width: 300px;text-align: center;margin-left: -120px;left: 40px;font-size: 19px;letter-spacing: 2px;;color:#F6DFB0;">设备列表</div>
                <div style="margin: 50px 20px ;position: relative;">
                    <div>
                        <span>日期</span>
                        <el-date-picker
                                v-model="deviceQuery.createTime"
                                type="date"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期" style="width: 150px;" size="mini">
                        </el-date-picker>
                        <span style="margin-left: 20px;">设备名称</span>
                        <el-input v-model="deviceQuery.name" placeholder="请输入设备名称" style="width: 150px;" size="mini"></el-input>
                        <span style="margin-left: 20px;">设备状态</span>
                        <el-select v-model="deviceQuery.status" placeholder="请选择" style="width: 150px;" size="mini">
                            <el-option
                                    v-for="item in statusOptList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <el-button type="primary" size="mini" style="margin-left: 20px;" @click="initDeviceMgrList">查询</el-button>
                        <el-button type="info" size="mini" @click="resetDeviceQuery">重置</el-button>
                        <el-button type="primary" size="mini" @click="addDevice">添加</el-button>
                        <el-button size="mini" @click="toDeviceBatchDelete">批量删除</el-button>

                    </div>
                    <div style="margin-top: 20px;">
                        <el-table
                                :data="tableData"
                                stripe
                                style="width: 100%" size="mini" height="500px" v-loading="loading" @selection-change="handleSelectionChange">
                            <el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>
                            <el-table-column prop="name" label="设备名称"></el-table-column>
                            <el-table-column prop="ip" label="设备IP" width="180"></el-table-column>
                            <el-table-column prop="createTime" label="添加日期" width="180"></el-table-column>
                            <el-table-column prop="status" label="设备状态" width="180"></el-table-column>
                            <el-table-column prop="opt" label="操作" >
                                <template slot-scope="scope">
                                    <el-link type="primary" @click="toDeviceDetail(scope.row)">查看详情</el-link>
                                    <el-link type="primary" @click="toDeviceEdit(scope.row)">编辑</el-link>
                                    <el-link type="primary" @click="toDeviceDelete(scope.row)">删除</el-link>

                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                                :current-page="pageNumber"
                                :page-size="pageSize"
                                :page-sizes="[10, 20, 30, 40, 50,  100 ]"
                                :total="total"
                                layout="total, sizes, prev, pager, next, jumper"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"/>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog :visible.sync="deviceUpdateDialog" :title="deviceDialogTitle" append-to-body width="600px" label-width="100px" style="text-align: left">
            <div>
                <el-form label-width="150px" :model="deviceForm" :rules="deviceFormRules" ref="deviceForm" size="mini">
                    <el-form-item label="设备类型" prop="deviceType">
                        <el-radio v-model="deviceForm.deviceType" label="无人机" :disabled="lookDevice">无人机</el-radio>
                        <el-radio v-model="deviceForm.deviceType" label="吊舱" :disabled="lookDevice">吊舱</el-radio>
                        <el-radio v-model="deviceForm.deviceType" label="固定设备" :disabled="lookDevice">固定设备</el-radio>
                    </el-form-item>
                    <el-form-item label="devicetype" prop="devtype">
                        <el-select v-model="deviceForm.devtype" placeholder="请选择" style="width: 250px;" :disabled="lookDevice">
                            <el-option
                                    v-for="item in devtypeList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="devid" prop="devid">
                        <el-input v-model="deviceForm.devid" style="width: 250px;" :disabled="lookDevice"/>
                    </el-form-item>
                    <el-form-item label="设备名称" prop="name">
                        <el-input v-model="deviceForm.name" style="width: 250px;" :disabled="lookDevice"/>
                    </el-form-item>
                    <el-form-item label="所在分类" prop="fl" >
                        <el-select v-model="deviceForm.fl" placeholder="请选择" style="width: 250px;" :disabled="lookDevice">
                            <el-option
                                    v-for="item in flOptsList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="添加时间" prop="createTime">
                        <el-date-picker
                                v-model="deviceForm.createTime"
                                type="date"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期" :disabled="lookDevice">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="设备IP" prop="ip">
                        <el-input v-model="deviceForm.ip" style="width: 250px;" :disabled="lookDevice"/>
                    </el-form-item>
                    <el-form-item label="设备端口" prop="port">
                        <el-input v-model="deviceForm.port" style="width: 250px;" :disabled="lookDevice"/>
                    </el-form-item>
                    <el-form-item label="经度" prop="jingdu">
                        <el-input v-model="deviceForm.jingdu" style="width: 250px;" :disabled="lookDevice"/>
                    </el-form-item>
                    <el-form-item label="纬度" prop="weidu" >
                        <el-input v-model="deviceForm.weidu" style="width: 250px;" :disabled="lookDevice"/>
                    </el-form-item>
                    <el-form-item label="是否支持压制" prop="isYazhi">
                        <el-radio v-model="deviceForm.isYazhi" label="1" :disabled="lookDevice">支持</el-radio>
                        <el-radio v-model="deviceForm.isYazhi" label="0" :disabled="lookDevice">不支持</el-radio>
                    </el-form-item>
                    <el-form-item label="视频流地址" >
                        <el-input v-model="deviceForm.streamUrl" style="width: 250px;" :disabled="lookDevice"/>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="deviceUpdateDialog = false">关闭</el-button>
                <el-button type="primary" @click="saveDeviceForm" v-if="!lookDevice">保存</el-button>
            </div>
        </el-dialog>

        <audio id="background-audio" loop>
            <source src="/static/img/jk-page/1干扰反制无效.mp3" type="audio/mpeg">
            您的浏览器不支持 audio 元素。
        </audio>
    </template>
</div>
<script type="text/javascript">
var wrjKz = {
    "dtime":"指令下发时间",
    "up":"控制上",
    "down":"控制下",
    "left":"控制左",
    "right":"控制右",
    "left_up":"控制左上",
    "left_down":"控制左下",
    "right_up":"控制右上",
    "right_down":"控制右下",
    // "ptzstop":"停止云台",
    "zoomup":"变倍控制 增",
    "zoomdown":"变倍控制 减",
    "speed":"速度等级",
    "focus":"聚焦控制",
    "counterstate":"其它设备反制状态",
    "manual":"M400手动模式"
};

var app = new Vue({
    el: '#app',
    data(){
        return{
            message: 'Hello Vue!',
            loading: false,
            showDialog: false,
            deviceDialog: false,
            map: null,
            currentTime: '',
            currentWeek: '',
            controlWrj: {
                show: false,
                width: '1500px',
                height: '340px'
            },

            controlJk: {
                show: false,
                width: '1500px',
                height: '340px'
            },
            wsUrl : 'ws://localhost:7030/websocket/test/userid',
            websocketWrj: null,
            websocketDc: null,
            websocketJk: null,
            st: null,
            st2: null,
            reconectTimes: 2,
            heartbeatTime: {},
            weidu:'',
            jingdu:'',
            gaodu:'',
            wrjInfo:{
                name: ''
            },
            dcInfo:{
                name: ''
            },
            jkInfo:{
                name: ''
            },
            wrjStatus:{
                unlock: true,
                locking: false
            },
            player: null,
            player1: null,
            player2: null,
            // mapCenter: [107.184556,29.666355],
            mapCenter: [107.182029,29.666936],
            mapWrj: [107.183029,29.666936],
            gdsbData: {

                dtime : '--',
                alarmtype: "--",
                alarmdistance: "--",
                orientation: "--",
                counter: "--"
            },
            guijidatas : [{weidu:38.9939848,jingdu:117.1264567,time:"10:02:00"},{weidu:38.9879848,jingdu:117.1204567,time:"10:04:00"},{weidu:38.9909848,jingdu:117.1294567,time:"10:06:00"},{weidu:38.9909848,jingdu:117.1174567,time:"10:08:00"},{weidu:38.9979848,jingdu:117.1234567,time:"10:10:00"},{weidu:38.9839848,jingdu:117.1234567,time:"10:12:00"}],
            leidaguancha: false,
            gdsbInfoList: [],
            gdsbDataList:  {},
            typeDeviceList: {},
            currentDeviceId: null,
            active: null,
            gjcxForm:{
                startDate: '',
                endDate: ''
            },
            bjqyForm:{
                gzq: '',
                jjq: '',
                jzq: ''
            },
            circleList: [],
            polyline: null,
            yazhiForm:{
                ms1: false,
                ms2: false,
                ms3: false,
                ms4: false,
                sdkzStart: false,
                gbsdkz:false
            },
            videoForm:{
                title:'--',
                title1: '--',
                title2: '--'
            },
            tmpDragObj: null,
            ytkzForm:{
                zoom: 0 ,
                focus: 0,
                sd: 50
            },
            statusOptList:[{
                label: '在线'
                ,value: '在线'
            },{
                label: '离线'
                ,value: '离线'
            }],
            deviceQuery:{
                createTime: '',
                name: '',
                status: ''
            },
            pageSize: 10,
            pageNumber: 0,
            total: 0,
            tableData: [],
            deviceUpdateDialog: false,
            deviceDialogTitle: '',
            deviceForm: {
                protocolType:'websocket',
                deviceType: '',
                name: '',
                fl: '',
                createTime: '',
                ip: '',
                port: '',
                jingdu: '',
                weidu: '',
                isYazhi: '',
                streamUrl: ''
            },
            devtypeList:[{
                label: 'M300',
                value: '3000'
            },{
                label: 'M300B',
                value: '3001'
            },{
                label: 'M400',
                value: '4000'
            },{
                label: 'A406',
                value: '4400'
            },{
                label: 'A406B',
                value: '4401'
            },{
                label: 'M500',
                value: '5000'
            },{
                label: 'M300',
                value: '3000'
            },{
                label: 'K800',
                value: '8000'
            },{
                label: 'K800B',
                value: '8001'
            }],
            flOptsList:[{
                label: 'K406',
                value: 'K406'
            },{
                label: 'K800',
                value: 'K800'
            },{
                label: 'M300',
                value: 'M300'
            },{
                label: 'M400',
                value: 'M400'
            }],
            deviceFormRules:{

                devtype: [{ required: true, message: '请选择devicetype', trigger: 'blur' }],
                devid: [{ required: true, message: '请输入devid', trigger: 'blur' }],
                deviceType: [{ required: true, message: '请选择设备类型', trigger: 'blur' }],
                name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
                fl: [{ required: true, message: '请选择所在分类', trigger: 'blur' }],
                createTime: [{ required: true, message: '请选择时间', trigger: 'blur' }],
                ip: [{ required: true, message: '请输入设备IP', trigger: 'blur' }],
                port: [{ required: true, message: '请输入设备端口', trigger: 'blur' }],
                jingdu: [{ required: true, message: '请输入经度', trigger: 'blur' }],
                weidu: [{ required: true, message: '请输入纬度', trigger: 'blur' }],
                isYazhi: [{ required: true, message: '请选择是否支持压制', trigger: 'blur' }]
            },
            lookDevice: false,
            multipleSelection: [],
            speed: 50,
            gdsb_markerlist: [],
            wrj_markerlist: [],
            alarmMarker: null,
            hasAlarm: false,
            showAlarmTip: 1 == localStorage.getItem('alarmtip')? true: false

        }

    },
    mounted :function () {
        let that = this;
        that.currentWeek = getWeek();
        that.currentTime = getTime();
        that.getTime();
        that.initAll();
        console.log('load success...')
        that.initMap('container',function (){
            console.log('loaded map success!');
        });

        // that.initPlayer().bar(false);
        // that.initPlayer1().bar(false);
        // that.initPlayer2().bar(false);
        // that. initSocket();

        // that.initPlayer();
        // that.initPlayer1();
        // that.initPlayer2();

        // that.runTimeSendData();
        that.getBjqy(function(data){
            that.bjqyForm = data;
            that.setAllCircles(that.bjqyForm.gzq, that.bjqyForm.jjq, that.bjqyForm.jzq);
        });

        document.addEventListener("click", this.doCloseActive);

        setInterval(function(){
            //判断counter
            var counter = localStorage.getItem('counter');
            if(counter == 1){
                //移除数据
                localStorage.removeItem('alarmpointer');
                localStorage.removeItem('alarm_leida');
                if(that.map && that.alarmMarker){
                    that.map.remove(that.alarmMarker);
                }

                // that.initEchart([]);

                var dom = document.getElementById("leidatu");
                var myChart1 = echarts.init(dom);
                myChart1.clear();

                that.closeAlarmtip();
                that.hasAlarm = false;
            }else{
                var alarmpointer = localStorage.getItem('alarmpointer');
                var alarm_leida = localStorage.getItem('alarm_leida');
                //显示数据
                if(alarmpointer){
                    var d = alarmpointer.split(",");
                    // that.setAlarmPointer([d[0],d[1]])
                }
                if(alarm_leida){
                    var d2 = alarm_leida.split(',');

                    // that.initEchart([
                    //     d2[0],//距离
                    //     d2[1],//度数 0-360
                    //     d2[2]//类型
                    // ]);
                }


                that.hasAlarm = true;

            }
        },200)


        setInterval(function(){
            var antidrone = localStorage.getItem('antidrone')
            if(!antidrone){
                return;
            }
            var data = JSON.parse(antidrone)
            let t = data.time
            let now = new Date().getTime();
            const oneMinute =  1000; // 1分钟的毫秒数
            const difference = Math.abs(now - t); // 绝对值，确保正数
            if(difference > 3 * oneMinute) // 如果差值超过3分钟，返回true
            {
                let websocket = wbUtil.websocketGdsbList[that.currentDeviceId]
                console.log('......................3分钟已到自动关闭 手动模式..........................')
                wbUtil.sendWs(websocket, 'manual','0', '0', 32, false)
                that.yazhiForm.ms1 = false;
                that.yazhiForm.ms2 = false;
                that.yazhiForm.ms3 = false;
                that.yazhiForm.ms4 = false;
                that.yazhiForm.sdkzStart = false;
                that.yazhiForm.gbsdkz = true;
                localStorage.removeItem('antidrone')
            }

            // for(let key in data){
            //     let item = data[key]
            //     let websocket = wbUtil.websocketGdsbList[item.currentDeviceId]
            //     wbUtil.sendWs(websocket, item.sendKey,item.devType, item.devid, item.cmd , item.sendValue)
            //     if(item.sendValue == '0000'){
            //         that.yazhiForm.ms1 = false;
            //     }else if(item.sendValue == '0010'){
            //         that.yazhiForm.ms2 = false;
            //     }else if(item.sendValue == '0100'){
            //         that.yazhiForm.ms3 = false;
            //     }else if(item.sendValue == '1000'){
            //         that.yazhiForm.ms4 = false;
            //     }
            // }

        },1000*60*3) //三分钟
        // },10000)

    },
    methods :{

        playAlarm(){
            var audio = document.getElementById("background-audio");
            audio.play();
        },
        setDeviceStatus(id, status){
            for(let fl in this.typeDeviceList){
                let item = this.typeDeviceList[fl]
                for(let i = 0 ; i < item.length ; i++){
                    if(item[i].id == id){
                        item[i]['status'] = status
                    }
                }
                console.log(item)

            }
            $.ajax({
                type: "POST",
                url: root+"/device/saveDeviceStatus",
                data: {
                    id: id,
                    status: status == '1'? "在线":"离线"
                },
                success: function(res){
                    console.log(res)

                }
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        saveDeviceForm(){
            let _this = this;
            _this.deviceForm['status'] = '离线'
            this.$refs['deviceForm'].validate((valid) => {
                if (valid) {
                    $.ajax({
                        type: "POST",
                        url: root+"/device/saveDevice",
                        data: _this.deviceForm,
                        success: function(res){
                            if(res.status == 'OK'){
                                _this.tipMsg('提示',  res.message);
                                _this.deviceUpdateDialog = false
                                _this.initDeviceMgrList();
                            }else{
                                _this.tipMsg('提示',  res.message ,'warning');
                            }

                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        changeYtkzSd(val){
            // sendWsRrj('speed','0', '0', 32, val)
            // this.speed = val;
        },
        deleteDevice(row){
            let _this = this;
            $.ajax({
                type: "POST",
                url: root+"/device/deleteDevice",
                data: {
                    ids: row.id
                },
                success: function(res){
                    _this.tipMsg('提示',  res.message);
                    _this.initDeviceMgrList();
                }
            });
        },
        toDeviceDetail(row){
            this.deviceForm = row;
            this.deviceUpdateDialog = true;
            this.deviceDialogTitle = '查看设备'
            this.lookDevice = true;
        },
        toDeviceEdit(row){
            this.deviceForm = row;
            this.deviceUpdateDialog = true;
            this.deviceDialogTitle = '修改设备'
            this.lookDevice = false;
        },
        toDeviceDelete(row){
            let _this = this;
            this.$confirm('确定要删除该条设备吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                _this.deleteDevice(row);
            }).catch(() => {

            });
        },
        toDeviceBatchDelete(){
            let _this = this;
            this.$confirm('确定要删除选择的设备吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log(_this.multipleSelection);
                let arr = []
                for (let i = 0; i < _this.multipleSelection.length; i++) {
                    let item = _this.multipleSelection[i]
                    arr.push(item.id)
                }
                $.ajax({
                    type: "POST",
                    url: root+"/device/deleteDevice",
                    data: {
                        ids: arr.join(',')
                    },
                    success: function(res){
                        _this.tipMsg('提示',  res.message);
                        _this.initDeviceMgrList();
                    }
                });
            }).catch(() => {

            });



        },
        addDevice(){
            this.deviceUpdateDialog = true;
            this.deviceDialogTitle = '添加设备'
            this.lookDevice = false;
        },
        resetDeviceQuery(){
            this.deviceQuery = {
                name: '',
                status: '',
                createTime: ''
            }
        },
        initDeviceMgrList(){
            var _this = this;
            this.loading = true;
            $.ajax({
                type: "POST",
                url: root+"/device/list",
                data: {
                    pageSize:_this.pageSize,
                    pageNumber:_this.pageNumber,
                    name: _this.deviceQuery.name,
                    createTime: _this.deviceQuery.createTime,
                    status: _this.deviceQuery.status,

                },
                success: function(res){
                    _this.loading = false;
                    _this.total = res.totalElements
                    _this.tableData = res.content
                }
            });


        },
        handleSizeChange(val) {
            this.pageSize = val
            this.initDeviceMgrList()
        },
        handleCurrentChange(val) {
            this.pageNumber = val
            this.initDeviceMgrList()
        },
        saveBjqy:function(callback){
            var _this = this;
            $.ajax({
                type: "POST",
                url: root+"/sysset/save",
                data: {
                    gzq: _this.bjqyForm.gzq,
                    jjq: _this.bjqyForm.jjq,
                    jzq: _this.bjqyForm.jzq,
                    id: _this.bjqyForm.id
                },
                success: function(data){
                    if(callback){
                        callback(data);
                    }
                }
            });
        },
        getBjqy:function(callback){
            var _this = this;
            $.ajax({
                type: "POST",
                url: root+"/sysset/one",
                data: {
                },
                success: function(data){
                    if(callback){
                        callback(data);
                    }
                }
            });
        },
        bjqySubmit(){
            let that = this;
            if(!that.bjqyForm.gzq){
                that.tipMsg('提示',  '请输入跟踪区半径' ,'warning');
                return ;
            }
            if(!that.bjqyForm.jjq){
                that.tipMsg('提示',  '请输入警戒区半径' ,'warning');
                return ;
            }
            if(!that.bjqyForm.jzq){
                that.tipMsg('提示',  '请输入拒止区半径' ,'warning');
                return ;
            }
            that.saveBjqy(function(data){
                that.tipMsg('提示',  '设置成功' );
                that.active = null
                that.setAllCircles(that.bjqyForm.gzq, that.bjqyForm.jjq, that.bjqyForm.jzq);
            });

        },
        bjqyReset(){
            this.bjqyForm.gzq = ''
            this.bjqyForm.jjq = ''
            this.bjqyForm.jzq = ''
        },
        doCloseActive(){
            if(this.active){
                this.active = null;
            }
        },
        doActive(val){
            this.active = val
        },
        selectRadio(row){
            console.log('当前选择设备:'+  row.name);
            this.currentDeviceId = row.id
            this.videoForm.title = row.name
            this.initPlayer(row.streamUrl);
        },
        loadGdsb(callback){
            let that = this;
            let typeDeviceList = {}
            that.getDbsbDevice(function(data){
                console.log("lllllllllllllllllllllllllllll")
                console.log(data)
                that.gdsbInfoList = data;
                for(let i = 0; i <that.gdsbInfoList.length ;i++){
                    let item = that.gdsbInfoList[i]
                    if(item && item.fl){
                        if(typeDeviceList[item.fl]){
                            item.status = 0
                            typeDeviceList[item.fl].push(item);
                        }else{
                            typeDeviceList[item.fl] = []
                            item.status = 0
                            typeDeviceList[item.fl].push(item);
                        }
                    }
                }
                that.typeDeviceList = typeDeviceList;

                console.log('....................................',typeDeviceList)
                that.gdsbInfoList.forEach((gdsbInfo)=>{
                    let id = gdsbInfo.id;
                    //初始化socket
                    wbUtil.websocketGdsbList[id] = null;
                });
                // console.log("okokokokok");
                console.log(wbUtil.websocketGdsbList);
                that.gdsbInfoList.forEach((gdsbInfo)=>{
                    console.log(gdsbInfo)
                    let id = gdsbInfo.id;

                    //初始化websocket
                    wbUtil.initSocket('ws://' + gdsbInfo.ip + ':' + gdsbInfo.port,
                    // wbUtil.initSocket('ws://localhost:7030/websocket/test/' + gdsbInfo.devid,
                        id,
                        gdsbInfo.devid,
                        gdsbInfo.devtype,
                        function(id, websocket, data){
                            console.log('固定设备:' + gdsbInfo.name)
                            that.receiveWebsocket(id,  data);
                        },
                        function(id, websocket, data){
                            that.setDeviceStatus(id, 0);
                        }
                    )
                })

                if(callback){
                    callback()
                }

            });
        },
        getDbsbDevice:function(callback){
            var _this = this;
            $.ajax({
                type: "POST",
                url: root+"/device/all",
                data: {
                    // deviceType:'固定设备'
                },
                success: function(data){
                    if(callback){
                        callback(data);
                    }
                }
            });
        },
        showLeiDaGuanCha(){
            this.leidaguancha = true;
        },
        showAlarmTipBtn(){
            this.showAlarmTip = true;
            localStorage.setItem('alarmtip' , '1')
        },
        initAll: function() {
            let that = this;
            console.log('call init method.')

            that.loadGdsb(function(){
                let list = that.gdsbInfoList;
                for (let i = 0; i < list.length;  i++) {
                    let item = list[i]
                    if("固定设备" == item.deviceType){
                        if(item.jingdu && item.weidu){
                            var marker = that.initGdsbs([item.jingdu,item.weidu]);
                            that.gdsb_markerlist.push({
                                id: item.id,
                                marker: marker
                            });
                        }

                    }else if("无人机" == item.deviceType){
                        if(item.jingdu && item.weidu){
                            var marker = that.initWrjs([item.jingdu,item.weidu], item.name + ' 正常');
                            that.wrj_markerlist.push({
                                id: item.id,
                                marker:marker
                            });
                        }

                        // that.initWrjs([107.183159,29.666046]);
                    }
                }

                //that.runTrack();
            });




            // that.heartbeatTime['5'] = new Date().getTime();

            //监测超过一定时间认为离线
            setInterval(function(){
                for(let key in that.typeDeviceList){
                    let list = that.typeDeviceList[key]
                    for(let i = 0 ; i < list.length ;i++){
                        let time = that.heartbeatTime[list[i].id]

                        if(!time){
                            list[i].status = 0
                            that.setDeviceStatus(list[i].id, 0);
                            break;
                        }
                        let oldTime = time ? new Date(time) : new Date();
                        let newTime = new Date();

                        if(oldTime.getTime() + 1000*60*5 < newTime.getTime()){
                            list[i].status = 0
                            that.setDeviceStatus(list[i].id, 0);
                            break;
                        }
                    }
                }
            } , 1000*60);

        },
        initEchart(data) {

            console.log("卫星显示======================" ,data)
            var size=[];
            var series = [];

            for(let i=0;i<data.length;i++){
                series.push({
                    coordinateSystem: 'polar',
                    areaStyle: {
                        opacity: 0 // 透明度为 50%
                    },
                    angleAxisIndex: 0,
                    radiusAxisIndex: 0,
                    type: 'scatter',
                    // symbolSize: 10,
                    symbolSize: 8,
                    itemStyle: {
                        shadowBlur: 2,
                        //color: data[i][2] == 0? '#E84B46':'#4A1BE7'
                        color: data[i][2] == 0? '#000000':'#4A1BE7'
                    },
                    label:{
                        normal:{
                            show:false,

                        }
                    },
                    data: [data[i]]
                })
            }
           let option = {
               backgroundColor: 'transparent',
               radar: {
                    indicator: [{text: '哈哈哈'}],
                    center: ['50%', '50%'],
                    radius: ['100%','100%'],
                    startAngle: 90,
                    splitNumber: 1,
                    shape: 'circle',
                   areaStyle: {
                       opacity: 0 // 设置透明度为 0.2
                   },
                    name: {
                        show:true,
                    },
                    splitArea: {
                        areaStyle: {
                            //color: ['#B8D3E4', '#96C5E3', '#7DB5DA', '#72ACD1']
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show:false
                    },
                    axisLabel: {
                        show: false,
                    },
                   itemStyle: {
                       opacity: 0

                   }

                },
                // color: ['#E84B46', '#496FA5','#4A1BE7','#1BD6E7'],
                polar: {},
                angleAxis: {
                    show:false,
                    type: 'value',
                    min:0,
                    max:360
                },
                radiusAxis: {
                    show:false,
                    axisAngle: 0
                },
                series:series
            };

            var dom = document.getElementById("leidatu");
            var myChart1 = echarts.init(dom);
            if (option && typeof option === 'object') {
                myChart1.setOption(option);
            }
        },

        receiveWebsocket(id , data){
            let that = this;
            if(data.cmd == '31'){ //心跳
                console.log('心跳:' + new Date());
                that.heartbeatTime[id] = new Date().getTime();
                that.setDeviceStatus(id , 1);
            }else if(data.cmd == '33'){ //设备主动上传
                let d = data.data;
                that.updateChart( id, data);

            }else if(data.cmd == '32'){//控制 => 响应
                let d = data.data;
                if(d.cmdAck == 0){//成功
                    if(d.OK == 'ptzstop'){

                    }else{
                        that.tipMsg(wrjKz[d.OK],  '执行成功');
                    }


                    if(d.OK == 'antidrone' ){
                        // this.yazhiForm.ms1 = !this.yazhiForm.ms1;
                    }
                }
            }
        },

        updateChart(id, data){
            let that = this;
            console.log("设备主动上传 ================================== data=="  + id + ":" + data);

            let d = data.data;
            // that.jikuResultInfo = {
            //    dtime
            // alarmtype
            // alarmdistance
            // orientation
            // counter
            // }
            let websocket = wbUtil.websocketGdsbList[id]
            if(!that.gdsbDataList[id]){
                that.gdsbData = {
                    id: id,
                    websocket:websocket,
                    data: d
                };
            }

            let arr = []
            arr.push([
                d.alarmdistance,//距离
                d.orientation,//度数 0-360
                d.alarmtype//类型
            ])
            that.initEchart(arr);

            that.gdsbDataList[id] = d
            for(let i = 0 ; i < that.gdsb_markerlist.length ; i++){
                let marker = that.gdsb_markerlist[i].marker
                if(that.gdsb_markerlist[i].id == id){
                    // console.log('aaaaaaaaaaaaaaaaa', d.alarm_lat, d.alarm_lng)
                    // marker.setPosition(new AMap.LngLat(d.alarm_lat, d.alarm_lng));
                }
            }



            /*
            for(let i = 0 ; i < that.wrj_markerlist.length ; i++){
                let marker = that.wrj_markerlist[i].marker
                if(that.wrj_markerlist[i].id == id){
                    //d.counter 反制结果，0 失败，1成功 ，2 评定中
                    var p0 = that.calcEndPosition([d.alarm_lat, d.alarm_lng])
                    var path = that.calcEndPath([d.alarm_lat, d.alarm_lng], p0);

                    marker.marker_jiku.setPosition(new AMap.LngLat(d.alarm_lat, d.alarm_lng));
                    // marker.marker_tip.setPosition(p0);
                    // marker.marker_txt.setPosition(p0);
                    // marker.polyline.setPath(path);

                }
            }
            */
            console.log("设备主动上传 ================================== 告警位置=="  + d.alarm_lng + "," + d.alarm_lat + ";最新值存储到:localStorage->alarmpointer");
            this.setAlarmPointer(d.alarmtype, [d.alarm_lng,d.alarm_lat])
            localStorage.setItem("alarmpointer", d.alarm_lng + "," + d.alarm_lat)
            localStorage.setItem("alarm_leida", d.alarmdistance + ',' + d.orientation + ',' + d.alarmtype)
            localStorage.setItem("counter", d.counter)

        },

        tipMsg(title, message, type){
            if(!type){
                type = 'success';
            }
            this.$notify({
                title: title,
                message: message,
                type: type,
                duration: 2000
            });
        },


        // ,

        sendWsRrj(sendKey,devType, devid, cmd , sendValue){
            if(!this.currentDeviceId){
                this.tipMsg('提示',  '请选择设备再进行操作' ,'warning');
                return ;
            }

            let rs = false;
            for(let i = 0 ;i < this.gdsbInfoList.length ; i++) {
                let item = this.gdsbInfoList[i]
                if(item  && item.id == this.currentDeviceId){
                    let websocket = wbUtil.websocketGdsbList[this.currentDeviceId]
                    console.log('发送云台控制指令');

                    // if(sendKey == 'zoomup'){
                    //     if(this.ytkzForm.zoom < 100){
                    //         this.ytkzForm.zoom++;
                    //     }
                    //
                    // }else if(sendKey == 'zoomdown'){
                    //     if(this.ytkzForm.zoom > 0){
                    //         this.ytkzForm.zoom--;
                    //     }
                    //
                    // }else if(sendKey == 'focus+'){
                    //     if(this.ytkzForm.focus < 64){
                    //         this.ytkzForm.focus++;
                    //     }
                    //
                    // }else if(sendKey == 'focus-'){
                    //     if(this.ytkzForm.focus > 0){
                    //         this.ytkzForm.focus--;
                    //     }
                    //
                    // }
                    devType = Number(item.devtype);
                    devid = item.devid;
                    // alert(devType)
                    // alert(devid)
                    wbUtil.sendWsSpec(websocket, sendKey,devType, devid, cmd , sendValue, this.ytkzForm.sd)


                    rs =  true;
                    break;
                }
            }

            if(!rs){
                this.tipMsg('提示',  '设备连接异常，无法发送指令' ,'warning');
                return ;
            }



        },
        sendWsRrjUp(sendKey,devType, devid, cmd , sendValue){
            for(let i = 0 ;i < this.gdsbInfoList.length ; i++) {
                let item = this.gdsbInfoList[i]
                if(item  && item.id == this.currentDeviceId){
                    let websocket = wbUtil.websocketGdsbList[this.currentDeviceId]
                    console.log('----发送云台控制指令  停止----');

                    devType = Number(item.devtype);
                    devid = item.devid;
                    // alert(devType)
                    // alert(devid)
                    wbUtil.sendWs(websocket, sendKey,devType, devid, cmd , sendValue)


                    rs =  true;
                    break;
                }
            }
        },
        sendWsYazhi(sendKey,devType, devid, cmd , sendValue){


            if(!this.currentDeviceId){
                this.tipMsg('提示',  '请选择设备再进行操作' ,'warning');
                return ;
            }

            if(sendKey == 'manual'){
                this.yazhiForm.sdkzStart = sendValue  ? true: false;
                if(sendValue == false){
                    this.yazhiForm.gbsdkz = false;
                }

            }else {
                if(!this.yazhiForm.sdkzStart){
                    this.tipMsg('提示',  '未开启“手动控制”' ,'warning');
                    return ;
                }
            }

            let currentGdsbInfo = null;
            for(let i = 0 ;i < this.gdsbInfoList.length ; i++){
                let item = this.gdsbInfoList[i]
                if(item.id == this.currentDeviceId){
                    currentGdsbInfo = item;
                    break;
                }
            }
            if(currentGdsbInfo.isYazhi != 1){
                this.tipMsg('提示',  '当前选择的设备不支持压制操作' ,'warning');
                return ;
            }
            let rs = false;
            for(let i = 0 ;i < this.gdsbInfoList.length ; i++) {
                let item = this.gdsbInfoList[i]
                if(item && item.id == this.currentDeviceId){
                   let websocket = wbUtil.websocketGdsbList[this.currentDeviceId]
                    console.log('发送压制指令');
                    devType = Number(item.devtype);
                    devid = item.devid;
                    wbUtil.sendWs(websocket, sendKey,devType, devid, cmd , sendValue)

                    // if(sendValue == '0001'){
                    //     this.yazhiForm.ms1 = true;
                    // }else if(sendValue == '0010'){
                    //     this.yazhiForm.ms2 = true;
                    // // }else if(sendValue == '1111'){
                    // //     this.yazhiForm.ms3 = true;
                    // }else if(sendValue == '1111'){
                    //     this.yazhiForm.ms4 = true;
                    // }

                    rs =  true;
                    break;
                }
            }

            if(!rs){
                this.tipMsg('提示',  '设备连接异常，无法发送指令' ,'warning');
                return ;
            }
            // alert(sendValue)
            if(sendValue === '0001' || sendValue=== '0000'){
                this.yazhiForm.ms1 = !this.yazhiForm.ms1
            }else if(sendValue=== '0011' || sendValue=== '0010'){
                this.yazhiForm.ms2 = !this.yazhiForm.ms2
            }else if(sendValue=== '0100' || sendValue=== '0101'){
                this.yazhiForm.ms3 = !this.yazhiForm.ms3
            }else if(sendValue=== '1111' || sendValue=== '1000'){
                this.yazhiForm.ms4 = !this.yazhiForm.ms4
            }

            if(sendValue === '0001' || sendValue=== '0000'
                || sendValue=== '0011' || sendValue=== '0010'
                || sendValue=== '0100' || sendValue=== '0101'
                ||sendValue=== '1111' || sendValue=== '1000'){
                var data = {
                    time: new Date().getTime()
                }
                localStorage.setItem('antidrone', JSON.stringify(data))
            }
            // var antidrone = localStorage.getItem("antidrone")
            // var data = {}
            // if(antidrone){
            //     data = JSON.parse(antidrone)
            // }

            // if(sendValue === '0001' || sendValue === '0011' || sendValue === '0101'|| sendValue === '1111'){
            //     var sv = '';
            //     if(sendValue == '0001'){
            //         sv = '0000'
            //     }else if(sendValue == '0011'){
            //         sv = '0010'
            //     }else if(sendValue == '0101'){
            //         sv = '0100'
            //     }else if(sendValue == '1111'){
            //         sv = '1000'
            //     }
            //     data[this.currentDeviceId + '_' + sendValue] = {
            //         currentDeviceId: this.currentDeviceId,
            //         sendKey: sendKey,
            //         devType: devType,
            //         devid: devid,
            //         cmd: cmd,
            //         sendValue: sv,
            //         time: new Date().getTime()
            //     }
            //     localStorage.setItem('antidrone', JSON.stringify(data))
            // }else if(sendValue === '0000' || sendValue === '0010' || sendValue === '0100'||sendValue === '1000'){
            //     var sv = '';
            //     if(sendValue == '0000'){
            //         sv = '0001'
            //     }else if(sendValue == '0010'){
            //         sv = '0011'
            //     }else if(sendValue == '0100'){
            //         sv = '0101'
            //     }else if(sendValue == '1000'){
            //         sv = '1111'
            //     }
            //
            //     delete data[this.currentDeviceId + '_' + sv];
            //     localStorage.setItem('antidrone', JSON.stringify(data))
            // }


        },

        closeControl(){
            this.controlWrj.show = false;
            this.deviceDialog = false;
            this.leidaguancha = false;
            this.showDialog = false;
        },
        closeAlarmtip(){
            this.showAlarmTip = false;
            localStorage.setItem('alarmtip', '0')
        },
        toControl(type){
            if(type == 1){
                if(!this.controlWrj.show){
                    this.controlJk.show = true;
                    if(this.controlJk.show){
                        // alert(this.$refs.container.offsetHeight)
                        this.controlJk.width = (this.$refs.container.offsetWidth - 160 - 12 - 30 - 10) + 'px'
                        this.controlJk.height = (this.$refs.container.offsetHeight - 160 - 50 + 28) + 'px'
                    }
                }

            }else if(type == 2){
                // this.controlWrj.show = this.controlWrj.show ? false: true;
                if(!this.controlJk.show){
                    this.controlWrj.show = true;
                    this.showDialog = true;
                }

            }
        },
        getTime(){
            let that = this;
            that.currentTime = getTime();
            that.currentWeek = getWeek();
            setTimeout(function(){
                that.getTime();
            },1000)
        },
        initPlayer(streamUrl){
            console.log('播放视频：' + streamUrl);
            //定义一个变量：videoObject，用来做为视频初始化配置
            // var videoObject = {
            //     // autoplay: true,
            //     controls:false,
            //     // loop: true, //播放结束是否循环播放
            //     // autoplay: true,//是否自动播放
            //     container: '.video', //“#”代表容器的ID，“.”或“”代表容器的class
            //     // video: 'http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/sample-mp4/05cacb4e02f9d9e.mp4'//视频地址
            //     video: 'http://192.168.1.45:1881/index/api/webrtc?app=live&stream=0&type=play'//视频地址
            // };
            // return new ckplayer(videoObject);//初始化播放器

            this.player = new ZLMRTCClient.Endpoint({
                element: this.$refs.videoPlayer,
                debug: false,
                zlmsdpUrl: streamUrl,
                simulcast: false,
                useCamera: true,
                audioEnable: false,
                videoEnable: true,
                recvOnly: true, // 默认为接收模式
                usedatachannel: false,
            });

            this.player.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, (e) => {
                console.log('播放成功', e.streams);
            });

            this.player.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, (s) => {
                console.log('获取到了本地流');
            });

            this.player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_MSG, (event) => {
                console.log('rtc datachannel 消息 :', event.data);
            });
        },
        initPlayer1(streamUrl1){
            console.log('播放视频1：' + streamUrl1);
            //定义一个变量：videoObject，用来做为视频初始化配置
            // var videoObject = {
            //     controls:false,
            //     container: '.video1', //“#”代表容器的ID，“.”或“”代表容器的class
            //     video: 'http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/sample-mp4/05cacb4e02f9d9e.mp4'//视频地址
            //
            // };
            // return new ckplayer(videoObject);//初始化播放器

            this.player1 = new ZLMRTCClient.Endpoint({
                element: this.$refs.videoPlayer1,
                debug: false,
                zlmsdpUrl: streamUrl1,
                simulcast: false,
                useCamera: true,
                audioEnable: false,
                videoEnable: true,
                recvOnly: true, // 默认为接收模式
                usedatachannel: false,
            });

            this.player1.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, (e) => {
                console.log('播放成功', e.streams);
            });

            this.player1.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, (s) => {
                console.log('获取到了本地流');
            });

            this.player1.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_MSG, (event) => {
                console.log('rtc datachannel 消息 :', event.data);
            });
        },
        initPlayer2(streamUrl2){
            console.log('播放视频2：' + streamUrl2);
            //定义一个变量：videoObject，用来做为视频初始化配置
            // var videoObject = {
            //     controls:false,
            //     logo:'',
            //     container: '.video2', //“#”代表容器的ID，“.”或“”代表容器的class
            //     video: 'http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/sample-mp4/05cacb4e02f9d9e.mp4'//视频地址
            //
            // };
            // return new ckplayer(videoObject);//初始化播放器

            this.player2 = new ZLMRTCClient.Endpoint({
                element: this.$refs.videoPlayer2,
                debug: false,
                zlmsdpUrl: streamUrl2,
                simulcast: false,
                useCamera: true,
                audioEnable: false,
                videoEnable: true,
                recvOnly: true, // 默认为接收模式
                usedatachannel: false,
            });

            this.player2.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, (e) => {
                console.log('播放成功', e.streams);
            });

            this.player2.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, (s) => {
                console.log('获取到了本地流');
            });

            this.player2.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_MSG, (event) => {
                console.log('rtc datachannel 消息 :', event.data);
            });
        },
        initGdsbs(position){
            var icon = new AMap.Icon({
                // size: new AMap.Size(30, 28),
                image: "/static/img/jk-page/jk.png",
                offset: new AMap.Pixel(0,0) //,
                // imageSize: new AMap.Size(30,28)
            })
            var marker_jiku = new AMap.Marker({
                map: this.map,
                position: position,
                icon: icon,
                offset: new AMap.Pixel(-13, -34)
            });
            return marker_jiku;
        },
        calcEndPosition(position){
            var loc = new AMap.LngLat(Number(position[0]), Number(position[1]));
            console.log(loc);
            var p0 = loc.offset(100, 20);
            return p0;
        },
        calcEndPath(position, p0){
            var path = [
                position,
                p0
            ]
            return path;
        },
        initWrjs(position, status){
            let that = this;
            var icon = new AMap.Icon({
                // size: new AMap.Size(30, 28),
                image: "/static/img/jk-page/wrj1.png",
                offset: new AMap.Pixel(0,0) //,
                // imageSize: new AMap.Size(30,28)
            })
            var marker_jiku = new AMap.Marker({
                map: that.map,
                position: position,
                icon: icon,
                offset: new AMap.Pixel(-13, -14)
            });
            var p0 = that.calcEndPosition(position);
            // console.log('结束坐标');
            // console.log(position)
            // console.log(p0)
            // marker_jiku.setLabel({
            //     // position: p0,
            //     offset:new AMap.Pixel(100,20),
            //     // offset:new AMap.Pixel(0, -5),
            //     content: `<img src="/static/img/jk-page/btn.png" style="width: 60px;height:20px;"/>`,
            //     direction:'top'
            // })

            var marker_tip = null;
            if(status == '正常'){
                marker_tip = new AMap.Marker({
                    map: that.map,
                    position: p0,
                    icon: new AMap.Icon({
                        // size: new AMap.Size(30, 28),
                        image: "/static/img/jk-page/dt-zc.png",
                        offset: new AMap.Pixel(0,0) ,
                        imageSize: new AMap.Size(130,35)
                    }),
                    offset: new AMap.Pixel(-13, -14)
                });

            }else{
                marker_tip = new AMap.Marker({
                    map: that.map,
                    position: p0,
                    icon: new AMap.Icon({
                        // size: new AMap.Size(30, 28),
                        image: "/static/img/jk-page/dt-gj.png",
                        offset: new AMap.Pixel(0,0) ,
                        imageSize: new AMap.Size(130,35)
                    }),
                    offset: new AMap.Pixel(-13, -14)
                });

            }
            var marker_txt = new AMap.Text({
                text: status, // 文本内容
                position: p0, // 文本位置
                style: { // 文本样式
                    'font-size': '14px',
                    'color': '#26D1D2',
                    'text-align': 'center',
                    'background': 'transparent',
                    'border': 'none',
                    'margin-top': '-10px'
                },
                map: that.map
            });

            var path = that.calcEndPath(position, p0);
            console.log(path)
            var polyline = new AMap.Polyline({
                path: path,
                map: that.map,
                isOutline: true,
                outlineColor: '#ffeeff',
                borderWeight: 1,
                strokeColor: "#3366FF",
                strokeOpacity: 1,
                strokeWeight: 1,
                strokeStyle: "solid",
                zIndex: 50,
            })
            // that.map.add([polyline]);
            return {
                marker_jiku:marker_jiku,
                marker_tip:marker_tip,
                marker_txt:marker_txt,
                polyline:polyline
            }

        },
        clearTrack(){
            this.map.remove( this.polyline);
        },
        showTrack(){
            let that = this;
            var arr = []
            for (let i = 0; i < that.guijidatas.length; i++) {
                let jingdu = that.guijidatas[i].jingdu
                let weidu = that.guijidatas[i].weidu
                //arr.push([jingdu, weidu]);
            }
            arr = [
                [107.182029,29.666936],
                [107.182133,29.666970],
                [107.182206,29.666925],
                [107.182325,29.666853],
                [107.182389,29.666789],
                [107.182527,29.666707],
                [107.182467,29.666253]
            ]
            console.log(arr)
            that.guijidatas;
            // JSAPI2.0 使用覆盖物动画必须先加载动画插件
            AMap.plugin('AMap.MoveAnimation', function() {


                var marker = new AMap.Marker({
                    map: that.map,
                    zIndex: 250,
                    position: arr[0],
                    icon: "/static/img/jk-page/wrj2.png",
                    offset: new AMap.Pixel(-13, -26),
                });

                // 绘制轨迹
                var polyline = new AMap.Polyline({
                    map: that.map,
                    path: arr,
                    zIndex: 200,
                    showDir: true,
                    strokeColor: "#28F",  //线颜色
                    // strokeOpacity: 1,     //线透明度
                    strokeWeight: 6,      //线宽
                    // strokeStyle: "solid"  //线样式
                });
                that.polyline = polyline;
            });
        },
        runTrack(){
            let that = this;
            var arr = []
            for (let i = 0; i < that.guijidatas.length; i++) {
                let jingdu = that.guijidatas[i].jingdu
                let weidu = that.guijidatas[i].weidu
                //arr.push([jingdu, weidu]);
            }
            arr = [
                [107.182029,29.666936],
                [107.182133,29.666970],
                [107.182206,29.666925],
                [107.182325,29.666853],
                [107.182389,29.666789],
                [107.182527,29.666707],
                [107.182467,29.666253]
            ]
            console.log(arr)
            that.guijidatas;
            // JSAPI2.0 使用覆盖物动画必须先加载动画插件
            AMap.plugin('AMap.MoveAnimation', function(){



               var marker = new AMap.Marker({
                    map: that.map,
                    zIndex: 250,
                    position: arr[0],
                    icon: "/static/img/jk-page/wrj2.png",
                    offset: new AMap.Pixel(-13, -26),
                });

                // 绘制轨迹
                var polyline = new AMap.Polyline({
                    map: that.map,
                    path: arr,
                    zIndex: 200,
                    showDir:true,
                    strokeColor: "#28F",  //线颜色
                    // strokeOpacity: 1,     //线透明度
                    strokeWeight: 6,      //线宽
                    // strokeStyle: "solid"  //线样式
                });

                var passedPolyline = new AMap.Polyline({
                    map: that.map,
                    zIndex: 210,
                    // strokeColor: "#AF5",  //线颜色
                    strokeColor: "#000",  //线颜色
                    strokeWeight: 6,      //线宽
                });


                marker.on('moving', function (e) {
                    passedPolyline.setPath(e.passedPath);
                    that.map.setCenter(e.target.getPosition(),true)
                });

                // that.map.setFitView();

                window.startAnimation = function startAnimation () {
                    marker.moveAlong(arr, {
                        // 每一段的时长
                        duration: 500,//可根据实际采集时间间隔设置
                        // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
                        autoRotation: true,
                    });
                };

                window.pauseAnimation = function () {
                    marker.pauseMove();
                };

                window.resumeAnimation = function () {
                    marker.resumeMove();
                };

                window.stopAnimation = function () {
                    marker.stopMove();
                };
            });
            startAnimation()
        },
        isSupportCanvas() {
            var elem = document.createElement('canvas');
            return !!(elem.getContext && elem.getContext('2d'));
        },
        getMapCenter() {
            alert("当前地图中心点：" + this.map.getCenter().getLng() + "," + this.map.getCenter().getLat());
        },
        setAllCircles(gzq, jjq, jzq){
            let that = this;
            that.circleList.forEach(item=>{
                that.map.remove(item);
            })
            var circle = new AMap.Circle({

                // center: [117.15,39.13],          //设置线覆盖物路径
                center: that.mapCenter,          //设置线覆盖物路径
                zIndex: 100,
                radius: jzq,
                strokeColor: "#ff0000", //边框线颜色
                strokeOpacity: 0.5,       //边框线透明度
                strokeWeight: 3,        //边框线宽
                fillColor: "#ff0000", //填充色
                fillOpacity: 0.25//填充透明度
            });

            //范围
            circle.setMap(that.map)

            var circle2 = new AMap.Circle({

                // center: [117.15,39.13],          //设置线覆盖物路径
                center: that.mapCenter,          //设置线覆盖物路径
                zIndex: 110,
                radius: jjq,
                strokeColor: "#FFD700", //边框线颜色
                strokeOpacity: 0.5,       //边框线透明度
                strokeWeight: 3,        //边框线宽
                fillColor: "#ffff00", //填充色
                fillOpacity: 0.25//填充透明度
            });

            //范围
            circle2.setMap(that.map)

            var circle3 = new AMap.Circle({

                // center: [117.15,39.13],          //设置线覆盖物路径
                center: that.mapCenter,          //设置线覆盖物路径
                zIndex: 120,
                radius: gzq,
                strokeDasharray: [10, 10],
                strokeColor: "#3366FF", //边框线颜色
                strokeOpacity: 0.5,       //边框线透明度
                strokeWeight: 2,        //边框线宽
                // fillColor: "#FFA500", //填充色
                fillOpacity: 0.25//填充透明度
            });

            //范围
            circle3.setMap(that.map)

            that.circleList.push(circle)
            that.circleList.push(circle2)
            that.circleList.push(circle3)
        },
        initMap(id, callback){
            var that = this;

            if (!this.isSupportCanvas()) {
                alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
            }

            const base_url = "/static/"
            const layer = new AMap.TileLayer({
                getTileUrl: function (x, y, z) {
                    return `${base_url}MAP_zxy/${z}/${x}/${y}/tile.png`;
                },
                opacity: 1,
                zIndex: 99,
            })

            var map = null
            // AMap.plugin('AMap.MoveAnimation', function(){
                map = new AMap.Map("container", {
                    resizeEnable: true,
                    zoom: 16.7,
                    rotateEnable: true,
                    pitchEnable: true,
                    // center: [117.162036,39.138323],
                    center: that.mapCenter,
                    defaultCursor: 'pointer',
                    showLabel: true,  //是否显示文字标注
                });

                map.on('click', function(e) {
                    console.log( e.lnglat.getLng() + ',' + e.lnglat.getLat())
                });


            // });
            this.map = map;
            // this.getMapCenter();
            callback(map)

            // this.setAlarmPointer([107.183029,29.666936]);
        },
        setAlarmPointer(alarmtype, position){
            var capitals = [
                {
                    center:[120.060824,30.357574],
                    color:'#ff0000',
                    animations:'myfirst01'
                },
                {
                    center:[120.061824,30.358574],
                    color:'#fffa02',
                    animations:'myfirst02'
                },
                {
                    center:[120.062824,30.354574],
                    color:'#00e921',
                    animations:'myfirst01'
                },
                {
                    center:[120.063824,30.35974],
                    color:'#fffa02',
                    animations:'myfirst02'
                },
                {
                    center:[120.057824,30.352574],
                    color:'#00e921',
                    animations:'myfirst01'
                },
                {
                    center:[120.056824,30.354574],
                    color:'#fffa02',
                    animations:'myfirst02'
                },
                {
                    center:[120.055824,30.360574],
                    color:'#98014e',
                    animations:'myfirst03'
                },
                {
                    center:[120.071824,30.358574],
                    color:'#98014e',
                    animations:'myfirst03'
                },
                {
                    center:[120.061824,30.358574],
                    color:'#ff7d00',
                    animations:'myfirst04'
                },
                {
                    center:[120.061824,30.358574],
                    color:'#ff7d00',
                    animations:'myfirst04'
                },
            ]
            if(this.alarmMarker){
                this.alarmMarker.setPosition(position)
            }else{
                /*var text = new AMap.Text({
                    text:' ',
                    textAlign:'center',
                    verticalAlign:'middle', //middle 、bottom
                    draggable:true,
                    cursor:'pointer',
                    angle:10,
                    style:{
                        'width': '5px',
                        'height': '5px',
                        'border-radius': '50%',
                        'border-width': 0,
                        'text-align': 'center',
                        'font-size': '12px',
                        'color': 'blue',
                        'background-color':capitals[0].color,
                        // '-moz-box-shadow': '0px 0px 20px 2px '+capitals[i].color,
                        // 'box-shadow': '0px 0px 20px 2px '+capitals[i].color,
                        'animation': 'blink 1s infinite',
                        // 'animation': 'myfirst 1s infinite'
                    },
                    position: position
                })
                text.setMap(this.map);

                this.alarmMarker = text;*/


                var icon = new AMap.Icon({
                    // size: new AMap.Size(30, 28),
                    image: alarmtype == 1 ?"/static/img/jk-page/wrj.png":"/static/img/jk-page/r.png",
                    offset: new AMap.Pixel(0,0) ,
                    imageSize: new AMap.Size(30,28)
                })
                var marker_jiku = new AMap.Marker({
                    map: this.map,
                    position: position,
                    icon: icon,
                    offset: new AMap.Pixel(-13, -34)
                });
                this.alarmMarker = marker_jiku;
            }

        },
        changeModel(){
            if (window.opener) {
                window.opener.focus();
                // window.open("", window.opener.name).focus();
            }else{
                var newWin = window.open("/hub/v1/index", 'index')
                if (newWin) {
                    // 已经打开了窗口，不再重复打开
                } else {
                    // 没有打开窗口，执行其他操作
                }
            }

        },
        toDevice(){
           this.deviceDialog = true;
           this.showDialog = true;
           this.initDeviceMgrList();
        },




        anxia(i) {
            console.log('按下:'+i);
            this.tmpDragObj = i;
        },
        dragover(event){
            event.preventDefault(); // 阻止默认行为
            // 这里可以添加拖动经过时的处理逻辑
        },
        drop(event){
            event.preventDefault(); // 阻止默认行为
            // 这里可以添加拖动经过时的处理逻辑
            // alert('元素已释放！');
            this.initPlayer1(this.tmpDragObj.streamUrl);
            this.videoForm.title1 = this.tmpDragObj.name;
            console.log('松开:'+ this.tmpDragObj);
            console.log(this.tmpDragObj)
            this.tmpDragObj = null;
        },
        drop2(event){
            event.preventDefault(); // 阻止默认行为
            // 这里可以添加拖动经过时的处理逻辑
            // alert('元素已释放！');
            this.initPlayer2(this.tmpDragObj.streamUrl);
            this.videoForm.title2 = this.tmpDragObj.name;
            console.log('松开:'+ this.tmpDragObj);
            console.log(this.tmpDragObj)
            this.tmpDragObj = null;
        },
    }
});

//阻止draggable事件的默认事件
// document.body.addEventListener('dragover', function (e) {
//     e.preventDefault();
// });



</script>
<style acoped>

    .masked-background::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: black;
        opacity: 0.5; /* 遮罩的透明度 */
        z-index: 100;
    }
    body{
        margin: 0;
        padding: 0;
        /*padding: 10px;*/

        background: #181818;
        color: #fff;

    }
    *{
        padding: 0;
        margin: 0;
    }


    .navbar{
        display: flex;
        justify-content: space-between;


    }

    .navbar-right{
        display: flex;
        justify-content: space-between;
    }



    .navbar-container{
        display: flex;
        justify-content: space-between;
        background: url("/static/img/sys/ (10).png");
        background-repeat: no-repeat;
        background-size: 100% 70px;
        height: 70px;
        width: calc(100% - 100px);
        position: relative;
    }
    .navbar-title{
        /*font-weight: bold;*/
        font-size: 34px;
        letter-spacing: 10px;
        margin-left: 100px;
        vertical-align: middle;
        margin-top: 10px;
    }
    .navbar-btns{
        position: absolute;
        display: flex;
        top: 32px;
        right: 25%;
        font-weight: bold;
        letter-spacing: 2px;

    }
    .navbar-btn{
        background: url("/static/img/sys/ (2).png") no-repeat  ;
        background-size: cover;
        height: 26px;
        width: 150px;
        margin-right: -15px;
        text-align: center;
        vertical-align: middle;
        background-position: center bottom;
        cursor: pointer;
        padding-top: 2px;
        color: #999;
    }

    .navbar-btn.btn-active{
        background: url("/static/img/sys/ (3).png") no-repeat  ;
        background-size: cover;
        color: #fff;
    }

    .times{
        position: absolute;
        top: 30px;
        right: 5%;
        color: rgba(255,255,255,0.8);
    }

    /*container*/
    .container{
        padding: 20px;
    }
    .container-bottom{

    }

    .c-left-item{
        min-height: calc((100vh - 70px) / 4 - 75px) ;
        color: rgba(255,255,255,0.8);
    }
    .c-left-item-title{
        position: relative;
        color: #fff;
        display: flex;
        justify-content: space-between;
    }
    .c-left-item-title img{
        position: relative;
        height: 35px;
    }
    .c-left-item-title span{
        position: absolute;
        top: 6px;
        left: 10px;
        letter-spacing: 1px;
        /*font-weight: bold;*/
        font-size: 16px;
    }
    .c-left-count-title{
        display: flex;

    }
    .env-content{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
        padding-top: 10px;
    }
    .env-item{
        width: 33%;
        display: flex;
        margin: 10px 0;
    }


    .env-item img{
        width: 40px;
        vertical-align: middle;
        margin-top: 10px;
    }
    .env-item .env-label > div{
        font-size: 20px;
        color: #EED8AF;
    }
    .env-item .env-label > span{
        font-size: 14px;
        color: rgba(255,255,255,0.8);
    }
    .env-item .env-label > div> span{
        font-size: 14px;
        color: #EED8AF;
    }
    /*机库*/
    .c-left-jk{
        margin-top: 20px;
    }
    .jk-content{
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        padding: 10px 0;
    }
    .jk-content > div{
        text-align: center;
        width: 50%;
    }
    .jk-label{
        font-size: 14px;

    }
    .jk-label ul{
        padding: 0 10px;
    }
    .jk-label ul li{
        float: left;
        list-style: none;
        padding: 0 5px;
    }
    .jk-label ul li:first-child{
        width: 60px;
    }
    .jk-label-line{
        height: 25px;
        background: #201D19;
        line-height: 25px;
        color: #BE9A64;
    }
    .jk-label-line:nth-child(odd){
        background: #2F281D;
    }
    .jk-label-line .key{
        color: rgba(255,255,255,0.6);;
    }

    /*无人机*/
    .c-left-wrj{
        margin-top: 20px;


    }
    .wrj-content{
        /*padding:  0 20px;*/
        text-align: center;
    }
    .wrj-labels{
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
    }
    .wrj-labels > div{
        width: 50%;
    }
    .wrj-labels .wrj-label-left{
        margin-right: 10px;
    }
    .wrj-label{
        font-size: 14px;

    }
    .wrj-label ul{
        padding: 0 10px;
    }
    .wrj-label ul li{
        float: left;
        list-style: none;
        padding: 0 5px;
    }
    .wrj-label ul li:first-child{
        width: 60px;
    }
    .wrj-label-line{
        height: 25px;
        background: #201D19;
        line-height: 25px;
        color: #BE9A64;
    }
    .wrj-label-line:nth-child(odd){
        background: #2F281D;
    }
    .wrj-label-line .key{
        color: rgba(255,255,255,0.6);;
    }

    /*统计*/
    .c-left-count{
        margin-top: 30px;
    }
    .c-left-count-title .count-label{
        text-align: center;
        padding: 10px 0;
    }
    .c-left-count-title .count-label div{
        color: #EED8AF;
        font-size: 16px;
    }

    .video-bg{
        background: url("/static/img/sys/ (9).png");
        background-size: 100% 300px;
        /*height: 300px;*/
        /*width: 100%;*/
        z-index: 1000;
        text-align: center;
    }

    .video-bg .video-title{
        position: relative;
        top: 0px;
        text-align: center;
        text-align: center;
        /*width: 33%;*/

    }

    /*无人机控制面板*/
    .control-wrj{
        /*border: 1px solid #2F281D;*/
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /*background: rgba(0,0,0,0.8);*/
        background-image: url(/static/img/jk-page/ytkz-12.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 410px;
        height: 320px;
        padding: 20px;
        z-index: 100000;

    }
    .control-wrj-fun{
        display: flex;
        justify-content: space-between;
        margin: 50px 0 10px 0;
    }
    /*.control-wrj-fun div > div > div{*/
    /*    width: 40px;*/
    /*    height: 40px;*/
    /*}*/
    .control-wrj-fun div img{
        width: 45px;
        height: 45px;
    }

    .control-wrj-fun div span{
        font-size: 14px;
        display: inline-block;
        width: 60px;
        text-align: center;
    }


    /*雷达观察*/
    .control-leidaguancha{
        border: 1px solid #2F281D;
        position: absolute;
        top: 0px;
        left: 5px;
        background: rgba(0,0,0,0.8);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding:10px ;
    }
    .control-leidaguancha .cell{
        display: block;
        height: 35px;
        font-size: 12px;
    }
    /*告警提示*/
    .control-alarmtip{
        border: 1px solid #2F281D;
        position: absolute;
        bottom: 20px;
        left: 10px;
        background: rgba(0,0,0,0.8);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding:10px ;
    }
    /*设备管理列表面板*/
    .control-device-body{
        /*content: "";*/
        position: absolute;
        height: 120vh;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        overflow: hidden;
    }
    .control-device{
        /*border: 1px solid #2F281D;*/
        /*position: absolute;*/
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /*background: rgba(0,0,0,0.8);*/
        margin: 0 auto;
        background-image: url(/static/img/jk-page/ytkz-13.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 1100px;
        height: 650px;
        padding: 20px;
        z-index: 100000;
        margin-top: 50px;
        position: fixed;

    }
    .control-device-fun{
        display: flex;
        justify-content: space-between;
        margin: 50px 0 10px 0;
    }

    .keyvalue{
        /*display: inline-block;*/
        /*width: 40px;*/
    }

    .tools{
        z-index:1000;
        width: 70px;
        /*height: 260px;*/
        position: absolute;
        border: 1px solid #2F281D;
        position: absolute;
        top: 0px;
        right: 0px;
        background: #291F0E;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        /*padding:10px ;*/

    }
    .tools img{
        width: 25px;
        height: 25px;
    }
    .tools .it-tool:first-child{
        margin-top: 0;
    }
    .tools .it-tool{
        font-size: 12px;
        padding: 10px;
        /*margin-top : 5px;*/
        /*margin-bottom: 5px;*/
        text-align: center;
        color: rgba(255, 255, 255, 0.8);
        position: relative;
    }
</style>
</body>
</html>
